<template>
  <div class="bg">
    <my-login
              title="不良事件管理系统"
              style="float: right;margin-top: 10vh;margin-right: 4vw;width: 350px"
              :login="loginHandler"
              @success="handleSuccess">
      <div slot="logo">
        <img style="width: 220px" height="150px" src="/my-web/assets/img/logo_hsz.dbd05c95.jpg" alt="">
      </div>
<!--      <div slot="footer">-->
<!--        账号：admin / user / guest <br>-->
<!--        密码： 12345678-->
<!--      </div>-->
    </my-login>
<!--    <Wave width="100%" height="100%"></Wave>-->
  </div>
</template>

<script>
  import logo from '@/assets/logo_hsz.jpg'
  import {login} from '@/api/login.js';
  import skin from '$ui/utils/skin'
  import mockForExample from '$my/code/mixin/mock-for-example'

  export default {
    mixins: [skin(), mockForExample],
    components: {
      Wave: () => import('$ui/components/my-wave')
    },
    props: {
      logo: {
        type: String,
        default: logo
      },
      // url查询参数名称
      urlQueryName: {
        type: String,
        default: 'url'
      },
      // 默认登录成功跳转页面地址
      defaultUrl: {
        type: String,
        default: '/'
      }
    },
    methods: {
      loginHandler({account, password}) {
        login({username: account, password: password}).then(response => {
          console.info(response)
          if(response.code===0){
            localStorage.setItem("token",response.data.token);
          }
        });
        return this.login({
          data: {
            account,
            password
          }
        })
      },
      handleSuccess(res) {
        // 在此记录登录信息和跳转
        if (!this.$access) return
        this.$access.login(res)
        this.redirect()
      },
      isSelf(url) {
        const {fullPath, path} = this.$route
        return url === fullPath || url === path || url === window.location.href
      },
      redirect() {
        const redirectUrl = this.$route.query[this.urlQueryName] || this.defaultUrl
        const path = decodeURIComponent(redirectUrl)
        // 如果准备要跳转的地址就是页面本身，不需要处理
        if (this.isSelf(path)) return
        const regex = /^http(s)?:\/\/.+/
        if (regex.test(path)) {
          window.location.href = path
        } else {
          this.$router.push(path)
        }
      }
    },
    created() {
      // 如果已经是登录状态，跳转到首页或指定页面
      if (this.$access && this.$access.isLogin()) {
        this.redirect()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg {
    position: relative;
    width: 100%;
    height: 100vh;
    /*background: url("~$ui/assets/bg/01.jpg") center center;*/
    background: url(../assets/home/login_4.jpg) no-repeat center center;
    background-size:100% 100%;
  }

  .my-login {
    z-index: 3;
  }

  .my-wave {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  ::v-deep .my-login__title{
    color: #a76c33;
  }
</style>
